<html>
<head>
	<title>CPE Operation Intelligence</title>

	<!-- sb-admin -->
	<link href="imports/sb-admin/css/bootstrap.min.css" rel="stylesheet">
	<link href="imports/sb-admin/css/sb-admin.css" rel="stylesheet">
	<link href="imports/sb-admin/css/plugins/morris.css" rel="stylesheet">
	<link href="imports/sb-admin/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<script src="imports/sb-admin/js/jquery-1.11.0.js"></script>
	<script src="imports/sb-admin/js/bootstrap.min.js"></script>

	<!-- Canvas js -->
	<script type="text/javascript" src="imports/canvasjs/canvasjs.min.js"></script>

	<!-- Graph -->
	<script src="elements/charts/js/graph_aps_count.js"></script>
	<script src="elements/charts/js/graph_aps_percentage.js"></script>

	<!-- Slider -->
	<link rel="stylesheet" id="themeCSS" href="imports/jQRangeSlider/css/classic.css">
	<!--<link rel="stylesheet" href="imports/jQRangeSlider/demo/style.css">-->
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
	<script src="imports/jQRangeSlider/lib/jquery.mousewheel.min.js"></script>
	<script src="imports/jQRangeSlider/jQAllRangeSliders-min.js"></script>

	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<script type="text/javascript" src="alerts/alerts.js"></script>

	<script type="text/javascript">

		var cpe_test=sessionStorage.getItem("cpe_id");
		var design;
		var design2;

		function designgraph_hour(){
			cpe_test=sessionStorage.getItem("cpe_id");
	//alert(cpe_test);

	$.get( "charts/noise_chart_day.php?opt="+cpe_test, function( data ) {
		var out = JSON.parse(data);
		var ultimo1minuto = jQuery.parseJSON('['+out[0]+']');
		var ultimo5minuto = jQuery.parseJSON('['+out[1]+']');
		var ultimo15minuto = jQuery.parseJSON('['+out[2]+']');
		var ultimo40minuto = jQuery.parseJSON('['+out[3]+']');
		var change = { 0: 'Idle',
		3000: 'Normal',
		5000: 'Strong',
		7000: 'Heavy',
		9000: 'Extreme Heavy'};



		$(function () {
			$('#container').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: ''
				},
				xAxis: {
					title: {
                enabled: true,
                text: '<b>Channels</b>',
                style: {
                    fontWeight: 'normal'
                }
            },
					categories: [
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'10',
					'11',
					'12',
					'13'
					]
				},
				yAxis: {
					title: {
                enabled: true,
                text: '<b>Occupation</b>',
                style: {
                    fontWeight: 'normal'
                }
            },
					min:0,
					max:10000,
					tickInterval: 1000,
					labels: {
						formatter: function() {
							var value = change[this.value];
							return value !== 'undefined' ? value : this.value;
						}

					}
				},

				tooltip: {

					pointFormat: '<span style="color:{series.color}">Channel {series.name}</span>: <b>{point.y:,.0f}</b> noise<br/>',
					shared: true,
					useHTML: true
				},
				plotOptions: {
					column: {
						pointPadding: 0.2,
						borderWidth: 0
					}
				},
				series: [{
					name: 'Last day',
					data: ultimo1minuto

				}, {
					name: 'Last 3 days',
					data: ultimo5minuto

				}, {
					name: 'Last 5 days',
					data: ultimo15minuto

				}, {
					name: 'Last 7 Days',
					data: ultimo40minuto

				}]
			});
});
});
design = setTimeout(designgraph_hour,30000);
}

function designgraph_minute(){
	cpe_test=sessionStorage.getItem("cpe_id");
	$.get( "charts/noise_chart_minute.php?opt="+cpe_test, function( data ) {
		var out = JSON.parse(data);
		var ultimo1minuto = jQuery.parseJSON('['+out[0]+']');
		var ultimo5minuto = jQuery.parseJSON('['+out[1]+']');
		var ultimo15minuto = jQuery.parseJSON('['+out[2]+']');
		var ultimo40minuto = jQuery.parseJSON('['+out[3]+']');
		var change = { 0: 'Idle',
		3000: 'Normal',
		5000: 'Strong',
		7000: 'Heavy',
		9000: 'Extreme Heavy'};



		$(function () {
			$('#container').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: ''
				},
				xAxis: {
					title: {
                enabled: true,
                text: '<b>Channels</b>',
                style: {
                    fontWeight: 'normal'
                }
            },
					categories: [
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'10',
					'11',
					'12',
					'13'
					]
				},
				yAxis: {
					title: {
                enabled: true,
                text: '<b>Occupation</b>',
                style: {
                    fontWeight: 'normal'
                }
            },
					min:0,
					max:10000,
					tickInterval: 1000,
					labels: {
						formatter: function() {
							var value = change[this.value];
							return value !== 'undefined' ? value : this.value;
						}

					}
				},

				tooltip: {

					pointFormat: '<span style="color:{series.color}">Channel {series.name}</span>: <b>{point.y:,.0f}</b> noise<br/>',
					shared: true,
					useHTML: true
				},
				plotOptions: {
					column: {
						pointPadding: 0.2,
						borderWidth: 0
					}
				},
				series: [{
					name: 'Last Minute',
					data: ultimo1minuto

				}, {
					name: 'Last 5 Minutes',
					data: ultimo5minuto

				}, {
					name: 'Last 15 Minutes',
					data: ultimo15minuto

				}, {
					name: 'Last 40 Minutes',
					data: ultimo40minuto

				}]
			});
});
});
design = setTimeout("designgraph_minute()",30000);
}

function clearfunc() {
	clearTimeout(design);
	//alert("clearing") ;
}

function designgraph(q){

var cpe_test=sessionStorage.getItem("cpe_id");

	if(q==undefined) {
		q = sessionStorage.getItem("query");
		//alert("undefined is now " + q);
	}
	else {
		sessionStorage.setItem("query",q);
		//alert("setting q " + q);
	}
$.get( "charts/noise_chart_area.php?opt="+cpe_test+"&query="+q, function( data ) {
	var out = JSON.parse(data);
	var u_10_min1 = jQuery.parseJSON('['+out[0]+']');
	var u_10_min2 = jQuery.parseJSON('['+out[1]+']');
	var u_10_min3 = jQuery.parseJSON('['+out[2]+']');
	var u_10_min4 = jQuery.parseJSON('['+out[3]+']');
	var u_10_min5 = jQuery.parseJSON('['+out[4]+']');
	var u_10_min6 = jQuery.parseJSON('['+out[5]+']');
	var u_10_min7 = jQuery.parseJSON('['+out[6]+']');
	var u_10_min8 = jQuery.parseJSON('['+out[7]+']');
	var u_10_min9 = jQuery.parseJSON('['+out[8]+']');
	var u_10_min10 = jQuery.parseJSON('['+out[9]+']');
	var u_10_min11 = jQuery.parseJSON('['+out[10]+']');
	var u_10_min12 = jQuery.parseJSON('['+out[11]+']');
	var u_10_min13 = jQuery.parseJSON('['+out[12]+']');
	var time = out[13];
	var change = {	0: 'Idle',
			3000: 'Normal',
			5000: 'Strong',
			7000: 'Heavy',
			9000: 'Extreme Heavy'};
		 

$(function () {
	Highcharts.setOptions({
        colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#24CBE5', '#FF5050', '#FFFF66', '#663300', '#6AF9C4' , '#64E572', '#FF9655' , '#FF0000' , '#CC33FF']
    });


    $('#container2').highcharts({
        chart: {
            type: 'line',
	    //alignTicks: false
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: time,
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
        	title: {
                enabled: true,
                text: '<b>Occupation</b>',
                style: {
                    fontWeight: 'normal'
                }
            },
		min:0,
		max:10000,
		tickInterval: 1000,
	   labels: {
		formatter: function() {
			var value = change[this.value];
			return value !== 'undefined' ? value : this.value;
		}
		
	   }
        },
        tooltip: {

					pointFormat: '<span style="color:{series.color}">Channel {series.name}</span>: <b>{point.y:,.0f}</b> noise<br/>',
					shared: true,
					useHTML: true
        },
        plotOptions: {
            area: {
               // stacking: 'normal',
                lineColor: '#FFFFFF',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#FFFFFF'
                }
            }
        },
        series: [{
           name: '1',
           data: u_10_min1,
	},{
            name: '2',
            data: u_10_min2,
	    visible: false
        }, {
            name: '3',
            data: u_10_min3,
	    visible: false
        }, {
            name: '4',
            data: u_10_min4,
	    visible: false
        }, {
            name: '5',
            data: u_10_min5,
	    visible: false
	},{
            name: '6',
            data: u_10_min6,
	    visible: true,
	    marker: {
                symbol: 'triangle'
            }
        }, {
            name: '7',
            data: u_10_min7,
	    visible: false
        }, {
            name: '8',
            data: u_10_min8,
	    visible: false
        }, {
            name: '9',
            data: u_10_min9,
	    visible: false
	},{
            name: '10',
            data: u_10_min10,
	    visible: false
        }, {
            name: '11',
            data: u_10_min11,
	    visible: true,
	    marker: {
                symbol: 'square'
            }
        }, {
            name: '12',
            data: u_10_min12,
	    visible: false
        }, {
            name: '13',
            data: u_10_min13,
	    visible: false
        }]
    });
});


});
design2 = setTimeout(designgraph,60000);
}

function clearfunc2() {
	clearTimeout(design2);
	//alert("clearing") ;
}

function setcpe(){
	document.getElementById("cpe_label").innerHTML = "<b>SSID:</b> " + sessionStorage.getItem('cpe_ssid') + "<b> MAC:</b> " + sessionStorage.getItem('cpe_mac') + " <b>Channel:</b> " + sessionStorage.getItem('cpe_wlan_channel');
}

</script>

</head>

<body onload="clearfunc();designgraph_hour();clearfunc2();designgraph(2);;setcpe();alerts();">

	<div id="wrapper">

		<?php 
		require 'elements/navigation_bar.php';
		echo print_navigation("noise_charts");
       // require 'elements/charts/network.php';
		?>	

			<div id="chart-wrapper">

				<!-- Page Heading -->
				<div class="row">
					<div class="col-lg-12">
						<h1 class="page-header">
							<i class="fa fa-fw fa-bar-chart-o">
							</i>
							WiFi Quality
							<small id="cpe_label"></small> 
						</h1>
					</div>
				</div>

						<div class="row clearfix">
							<div class="col-md-12 column">
								<div class="row clearfix">
									<div class="col-md-12 column">
										<div id="alert_php"></div>
									</div>
								</div>
								<div class="row clearfix">
									<div class="col-md-12 column">
										<div id="notice_php"></div> 
									</div>
								</div>
							</div>
						</div>


				<div class="row">
					<div class="col-lg-10 column">

								<h3 class="panel-title">
									<legend>Column Chart</legend>
								</h3>


							<div class="panel-body">


								<div class="row">
									<div id="container" style="min-width: 310px; height: 400px; max-width: 1200px; margin: 0 auto">
									</div>
								</div>

							</div>


					</div>
					<div class="col-lg-2 column">
						<fieldset>
							<legend>Options:</legend>
							<div class="span2" style="width:150px;margin:auto;align: center;">
							<button type="button" class="btn btn-primary btn-block" onclick="clearfunc();designgraph_minute()">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Minutes</button>
							<br /><button type="button" class="btn btn-primary btn-block" onclick="clearfunc();designgraph_hour()">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Days</button>
							<br />
							</div>
							</fieldset>
					</div>
				</div>
				
								<div class="row clearfix">
					<div class="col-lg-10 column">

								<h3 class="panel-title">
									<legend>Line Chart</legend>
								</h3>


							<div class="panel-body">


								<div class="row">
									<div id="container2" style="min-width: 310px; height: 400px; max-width: 1200px; margin: 0 auto">
									</div>
								</div>

							</div>

					</div>
					<div class="col-lg-2 column">
						<fieldset>
							<legend>Options:</legend>
							<div class="span2" style="width:150px;margin:auto;align: center;">
							<button type="button" class="btn btn-primary btn-block" onclick="clearfunc2();designgraph(1)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Minutes</button>
							<br /><button type="button" class="btn btn-primary btn-block" onclick="clearfunc2();designgraph(2)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Days</button>
							<br /><button type="button" class="btn btn-primary btn-block" onclick="clearfunc2();designgraph(3)">  <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Weeks</button>
							</div>
							</fieldset>
					</div>
				</div>
				</div>
			</div>
</body>
</html>

